import React from 'react'; 

class Home4 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            msg: "这是一个Home组件",
            message: "这是一个Message",
            userName: "这是一个userName"
        }
        this.getMessage = this.getMessage.bind(this)
    }

    run() {
        alert("我是一个run方法");
    }

    getData(){
        alert(this.state.msg);
    }

    getMessage(){
        alert(this.state.message);
    }

    getUserName = () => {
        alert(this.state.userName);
    }

    setMsg = ()=> {
        this.setState({
            msg: "这是一个Home组件 改变后的值"
        })
    }

    setUserName = (str) => {
        //改变state的值 
        this.setState({
            userName: str
        })
    }

    render(){
        return (
            <div > 
                <h2> { this.state.msg}</h2>
                <h2> { this.state.userName}</h2>
                <button onClick={this.run}>执行方法</button>
                <br/>
                <br/>
                <button onClick={this.getData.bind(this)}>获取数据--第一种改变this指向的方法</button>
                <br/>
                <br/>
                <button onClick={this.getMessage}>获取数据--第二种改变this指向的方法</button>
                <br/>
                <br/>
                <button onClick={this.getUserName}>获取数据--第三种改变this指向的方法</button>
                <br/>
                <br/>
                <button onClick={this.setMsg}>改变state里面的值</button>
                <br/>
                <br/>
                <button onClick={this.setUserName.bind(this, "张三")}>执行方法传值</button>
            </div>
        )
    }
}

export default Home4 